<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{
            height: 3000px;
        }
    </style>
</head>
<body>


    <button id="b">0</button>

    <script>



        // 定时器叠加的问题






        var oBtn = document.getElementById('b') ;


        // 多次点击按钮，定时器会变快    定时器变多了
        // oBtn.onclick = function() {
        //     setInterval(function() {
        //         oBtn.innerHTML++;
        //     } , 1000)
        // }


        // 10:20:21:300   闹钟  10:20:22:300 
        // 10:20:21:500   又定了一个闹钟  10:20:22:500




        // 解决方案
        //   增加一个开关   
        //      一开始开关是关闭的，点击之后开关打开，定时器就运行   下次点击的时候，判断一下开关的状态
        //      第一次执行，后面的不执行

        // var flag = true ;   // 全局变量
        // oBtn.onclick = function() {
        //     if(flag === true) {    // 开关是关着的
        //         // 改变开关的状态
        //         flag = false ;
        //         setInterval(function(){
        //             oBtn.innerHTML++;
        //         } , 1000)

        //     }
        // }




        // 解决方案2
        //   如果没有闹钟就定一个闹钟，如果有闹钟就删除，重新定义个闹钟

        //    如果判断有没有闹钟   定时器是以编号的形式存在

        //    高频率点击时，不会执行  直到不点击的时候，才会执行  也就是执行最后一次


        var t ;  // 存储定时器的编号
        oBtn.onclick = function() {
            console.log(t);
            if(t) {
                clearInterval(t) ;
               
            }
            t = setInterval(function(){
                oBtn.innerHTML++ ;
            } , 1000)
        
            
        }


        // 10:20:21    22s执行
        // 10：20:21:100   关闭了闹钟   重新设置了一个闹钟   10:20:22:100 执行
        // 





    </script>
    
</body>
</html>